<script>
  import { moment } from 'istrong-timeutil';
  import { get } from 'istrong-axiosmodel';
  import { assign } from 'lodash';
  import setLoading from '../../libs/loading';
  import FilterPanel from '../../components/FilterPanel.vue';

  import vgMap from './Map.vue';
  import vgList from '../../components/ListPage.vue';

  export default {
    name: 'rainMain',
    components: {
      'vg-Map': vgMap,
      'vg-List': vgList,
      'right-FilterPanel': FilterPanel
    },
    data() {
      return {
        showType: 'list',//显示类型，【map、list】
        staticEnabled: true,//首次加载静态数据配置
        filterOpts: {
        },//筛选配置
        loading: false,
        listFields: [
          {
            fieldLabel: '站名',
            fieldName: 'station_name',
            fieldType: 'String',
            headerClass: 'listViewer-col-stationName listViewer-col-stationName-rain',
            contentClass: 'listViewer-col-stationName listViewer-col-stationName-rain'
          },
          {
            fieldLabel: '雨量<span class="listViewer-header-unit">(mm)</span>',
            fieldName: 'val',
            fieldType: 'Number',
            fixed: 1,
            defaultLabel: '-',
            headerClass: 'listViewer-col-val listViewer-col-val-rain',
            contentClass: 'listViewer-col-val listViewer-col-val-rain'
          },
          {
            fieldLabel: '地区',
            fieldName: 'area_name',
            fieldType: 'String',
            headerClass: 'listViewer-col-areaName-rain',
            contentClass: 'listViewer-col-areaName-rain'
          }
        ],
        filterConditions: {
          timeRange: {
            beginTime: '',
            endTime: ''
          },//查询条件——时间
          atcunits: []//查询条件——站点隶属
        },
        positionMarkerId: '',
        data: [],//站点数据
        filterPanelVisible: false,//筛选面板
        iosLock: false
      }
    },
    watch: {
      loading(val) {
        setLoading(val);
      },
      filterConditions(val) {
        this.getData();
      },
      filterPanelVisible(val) {
        this.iosLock = val;
      }
    },
    mounted() {
    },
    methods: {
      getData() {
        this.loading = true;
        let {timeRange, atcunits, area} = this.filterConditions;
        let atcunit = [];
        atcunits.forEach(item => {
          if (item.checked) {
            atcunit.push(item.value);
          }
        });//隶属条件过滤
        get('rain.' + (this.staticEnabled ? 'gradeStatic' : 'grade'),
          (this.staticEnabled ? {} : {
            rainGrade: {
              time: ['[',
                moment(timeRange.beginTime).format('YYYY-MM-DDTHH:mm:ss'),
                ',',
                moment(timeRange.endTime).format('YYYY-MM-DDTHH:mm:ss'), ']'].join(''),
              atcunit: atcunit.join(','),
              filter: this.filterOpts.fixedFitlerMain + (area && area !== '' ? ',area[' + area + ']' : '')
            }
          })).then(result => {
            let gradeList = result.data || result || [];
            let data = [];
            gradeList.forEach(grade => {
              data = data.concat(grade.data || []);
            });
            this.data = data;
            this.loading = false;
          });
        this.staticEnabled = false;
      },
      onShowChartInfo(data) {
        let {beginTime, endTime} = this.filterConditions.timeRange;
        this.$router.push({
          name: 'rain/chart',
          query: {
            id: data.station_id,
            name: data.station_name,
            beginTime: beginTime,
            endTime: endTime
          }
        });
      },
      onChangeShowType(type) {
        this.showType = type;
      },
      onPositionEnd() {
        this.positionMarkerId = '';
      },

      onFilterPanelState(state) {
        this.filterPanelVisible = state;
      }
    },
    created() {
      let moduleConfig = this.$AppConfig.module.rain || {};
      this.showType = moduleConfig.defaultContent || 'list';
      this.staticEnabled = !!moduleConfig.staticEnabled;
      this.filterOpts = {
        timeOpts: moduleConfig.timeOpts,
        atcunitsOpts: moduleConfig.atcunitsOpt,
        areaPickerOpts: assign({ enabled: true }, moduleConfig.areaOpts),
        fixedFitlerMain: moduleConfig.fixedFitler_main
      };
    },
    beforeDestroy() {
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        if (from.path === '/rain/chart' && to.params.showType) {
          vm.showType = to.params.showType;
          vm.positionMarkerId = to.params.id;
        }
      });
    }
  }
</script>
<template>
  <div class="pageMain">
    <keep-alive>
      <vg-Map :positionMarker="positionMarkerId" :beginTime="filterConditions.timeRange.beginTime" :endTime="filterConditions.timeRange.endTime"
        :data="data" @changeShowType="onChangeShowType" @showChartInfo="onShowChartInfo" @setFilterConditions="onFilterPanelState"
        @positionEnd="onPositionEnd" v-if="showType !== 'list'"></vg-Map>
      <vg-List :beginTime="filterConditions.timeRange.beginTime" :endTime="filterConditions.timeRange.endTime" :iosLock="iosLock"
        :data="data" :fields="listFields" @setFilterConditions="onFilterPanelState" @changeShowType="onChangeShowType" @showChartInfo="onShowChartInfo"
        v-if="showType === 'list'"></vg-List>
    </keep-alive>
    <right-FilterPanel v-model="filterConditions" :visible="filterPanelVisible" @stateChange="onFilterPanelState" :timeOpts="filterOpts.timeOpts"
      :atcunitsOpts="filterOpts.atcunitsOpts" :areaPickerOpts="filterOpts.areaPickerOpts">
    </right-FilterPanel>
  </div>
</template>
<style>
.listViewer-col-stationName-rain{
  width: 44%;
}
.listViewer-col-val-rain{
  width: 21%;
}
.listViewer-col-areaName-rain{
  min-width: 80px;
  width: 23%;
  text-align: center;
}
</style>